<template>
    <!-- 健康管理主容器 -->
    <div class="studyContainer">
        <!-- ==================== 体检报告区域 ==================== -->
        <div class="box1">
            <!-- 体检报告标题 -->
            <div class="title"> 体检报告 </div>
            <!-- 体检报告内容容器 -->
            <div class="chengJJL-container">
                <!-- 体检报告项目 -->
                <div class="chengJJL-item">
                    <!-- 健康评级区域 -->
                    <div class="chengJJL-itembox-jkpj">
                        <!-- 健康评级标题 -->
                        <!-- <div style="color: #fff;">健康评级</div> -->
                        <!-- 健康评级显示区域 -->
                        <div style="width: 100%;">
                            <!-- 评级容器 -->
                            <div class="rating-container">
                                <!-- 评级字母 -->
                                <!-- <div class="letter">{{ healthRating.level }}</div> -->
                                 <div class="rating-image">
                                  <img :src="getRatingImage(healthRating.level)" :alt="healthRating.level + '级'" class="rating-img" />
                                </div>
                                <!-- 健康心形图标 - 动态生成 -->
                                <div
                                    v-for="index in 5"
                                    :key="index"
                                    class="heart"
                                    :class="{ 'full': index <= healthRating.stars, 'empty': index > healthRating.stars }"
                                ></div>
                            </div>
                        </div>
                        <!-- 评级说明 -->
                        <div style="padding: 8px 0 12px 12px; font-size: 11px; color: #8CD7FF;" v-px-to-vw> 超过了{{ healthRating.percentage }}%的同龄人</div>
                    </div>
                    <!-- 基本情况区域 -->
                    <div class="chengJJL-itembox-jkpj-baseInfo">
                        <!-- 基本情况标题 -->
                        <div style=" color: #8CD7FF;">基本情况</div>
                        <!-- 基本情况内容容器 -->
                        <div class="chengJJL-itembox-jkpj-baseInfo-wk">
                            <!-- 有数据时显示基本健康数据 -->
                            <div v-if="basicHealthData.length > 0" style="display: flex; flex-wrap: wrap; gap: 10px;" v-px-to-vw>
                                <!-- 遍历基本健康数据项 -->
                                <div v-for="item in basicHealthData" :key="item.name" style="flex: 1; min-width: 120px;" v-px-to-vw>
                                    <!-- 健康数据项显示 -->
                                    <div style="color: white; font-size: 12px;" v-px-to-vw>
                                        <!-- 健康项目名称和结果 -->
                                        <span style="color: white;">{{ item.name }}：</span>
                                        <span :style="getValueStyle(item.name)">{{ item.value }}{{ item.unit || '' }}</span>
                                        <!-- 健康评价标签 -->
                                        <span v-if="item.evaluation" :style="getEvaluationStyle(item.evaluation)" style="margin-left: 10px; font-size: 12px; font-weight:bold; border-radius: 3px; padding: 0 3px; color: #fff; display: inline-block;" v-px-to-vw>{{ item.evaluation }}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 无数据时显示提示信息 -->
                            <div v-else style="color: #999; font-size: 12px; text-align: center;" v-px-to-vw>暂无基本健康数据</div>
                        </div>
                    </div>
                    <!-- 身体警告区域 -->
                    <div class="chengJJL-itembox-jkpj-baseInfo">
                        <!-- 身体警告标题 -->
                        <div style=" color: #8CD7FF;">身体警告</div>
                        <!-- 身体警告内容容器 -->
                        <div class="chengJJL-itembox-jkpj-baseInfo-wk">
                            <!-- 有身体警告数据时显示 -->
                            <div v-if="healthWarningData.length > 0" style="display: flex; flex-wrap: wrap; gap: 10px;" v-px-to-vw>
                                <!-- 遍历身体警告数据项 -->
                                <div v-for="item in healthWarningData" :key="item.pe_item_name" style="flex: 1; min-width: 120px;" v-px-to-vw>
                                    <!-- 身体警告信息显示 -->
                                    <div style="font-size: 12px;" v-px-to-vw>
                                        {{ item.pe_item_name }}：
                                        <span style="color: #BD3124;">{{ item.pe_item_result }}{{ item.unit || '' }}</span>
                                        <span v-if="item.pe_item_evaluation" 
                                              style="display: inline-block; margin-left: 10px; font-weight:bold; border-radius: 3px; background-color: #BD3124; padding: 0 3px; color: #fff;" 
                                              v-px-to-vw>{{ item.pe_item_evaluation }}</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 无身体警告数据时显示提示信息 -->
                            <div v-else style="color: #999; font-size: 12px; text-align: center;" v-px-to-vw>暂无身体警告数据</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ==================== 体测报告和就医情况区域 ==================== -->
        <div class="box2" style="max-height: 30%;">
            <!-- 体测报告和就医情况容器 -->
            <div class="xuekjhd-container" style="height: 100%;">
                <!-- 体测报告区域 -->
                <div class="xuekjhd-itembox" style="padding-right: 18px; border-right: 1px solid #57DCF9;">
                    <!-- 体测报告标题 -->
                    <div class="title"> 体测报告 </div>
                    <!-- 体测报告图表容器 -->
                    <div v-if="physicalTestData.length > 0" ref="barticbg" class="chart-container"></div>
                    <!-- 无体测数据时显示提示 -->
                    <div v-else style="color: #999; font-size: 14px; text-align: center; padding: 20px;" v-px-to-vw>
                      <img src="@/assets/images/profile/students/rytc_empty.png" alt="暂无数据" /> 
                    </div>
                </div>
                <!-- 就医情况区域 -->
                <div class="xuekjhd-itembox" style="padding-left: 18px;">
                    <!-- 就医情况标题和学年选择器 -->
                    <div class="medical-header">
                        <div class="title"> 就医情况 </div>
                        <div class="academic-year-selector">
                            <select v-model="selectedAcademicYear" @change="onAcademicYearChange" class="academic-year-select">
                                <option value="">总学年</option>
                                <option v-for="year in academicYearOptions" :key="year.value" :value="year.value">
                                    {{ year.label }}
                                </option>
                            </select>
                            <!-- 调试信息 -->
                            <!-- <div v-if="studentBaseInfo.rxnd" style="font-size: 10px; color: #00f0ff; margin-top: 2px;">
                                学籍(rxnd): {{ studentBaseInfo.rxnd }}
                            </div>
                            <div v-if="academicYearOptions.length > 0" style="font-size: 10px; color: #00f0ff; margin-top: 2px;">
                                学年选项: {{ academicYearOptions.length }}个
                            </div> -->
                        </div>
                    </div>
                    <!-- 就医情况图表容器 -->
                    <div class="medical-chart-container">
                        <!-- 就医情况饼图 -->
                        <div ref="chatJiuYQK" class="chart-container"></div>
                        <!-- 详情按钮容器 -->
                        <div class="detail-button-container">
                            <!-- 查看详情按钮 -->
                            <button class="detail-button" @click="showMedicalDetails">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ==================== 营养分析区域 ==================== -->
        <div class="box2">
            <!-- 营养分析标题 -->
            <div class="title"> 营养分析 </div>
            <!-- 营养分析图表容器 -->
            <div class="xuekjhd-container" style="height: calc(100% - 88px); flex-grow: 1; flex-shrink: 1;" v-px-to-vw>
              <!-- 进食量分析区域 -->
              <!-- 
              <div class="xuekjhd-itembox">
                  进食量分析标题
                  <div style=" color: #8CD7FF;"> 进食量分析 </div>
                  进食量分析图表
                  <div ref="chatJinShL" class="chart-container"></div>
              </div>
              -->
              <!-- 营养摄入量区域 -->
              <div class="xuekjhd-itembox">
                  <!-- 营养摄入量标题 -->
                  <!-- <div style=" color: #8CD7FF;"> 营养摄入量 </div> -->
                  <!-- 营养摄入量图表 -->
                  <div ref="chatYingYShRL" class="chart-container"></div>
              </div>
            </div>
            <!-- 饮食建议标题 -->
            <div style=" color: #8CD7FF;"> 饮食建议： </div>
            <!-- 饮食建议内容 -->
            <div style="line-height: 1.5; font-size: 14px; height: 20px; padding-top: 4px; overflow-y: scroll;" v-px-to-vw> {{ nutritionSuggestion || '暂无饮食建议' }} </div>
        </div>

        <!-- ==================== 健康详情弹窗区域 ==================== -->
        <!-- 健康详情弹窗 -->
        <csDialoga v-model="healthDetailVisible" width="70%" >
            <!-- 健康详情内容容器 -->
            <div class="health-detail-content">
                <!-- 就医大标题 -->
                <div class="medical-title">就&nbsp;&nbsp;医&nbsp;&nbsp;记&nbsp;&nbsp;录</div>
                <!-- 加载状态显示 -->
                <div v-if="healthDetailLoading" class="loading-container">
                    <div class="loading-text">加载中...</div>
                </div>
                <!-- 无数据状态显示 -->
                <div v-else-if="healthDetailData.length === 0" class="no-data-container">
                    <div class="no-data-text">暂无就医详情数据</div>
                </div>
                
                <!-- 健康详情列表 -->
                <div v-else class="health-detail-list">
                    <!-- 健康详情项目 -->
                    <div v-for="(item, index) in healthDetailData" :key="index" class="health-detail-item">
                        <!-- 详情头部信息 -->
                        <div class="detail-header">
                            <!-- 就诊时间 -->
                            <!-- <div class="treatment-date"> -->
                                <!-- <span class="date-label">就诊时间：</span> -->
                                <span class="date-value">就诊时间：{{ formatDate(item.treatment_date) }}</span>
                            <!-- </div> -->
                            <!-- 主治医生 -->
                            <!-- <div class="doctor-name"> -->
                                <!-- <span class="doctor-label">主治医生：</span> -->
                                <span class="doctor-value">主治医生：{{ item.doctor_name }}</span>
                            <!-- </div> -->
                        </div>
                        <!-- 详情内容区域 -->
                        <div class="detail-content">
                            <!-- 症状描述区域 -->
                            <!-- <div class="detail-section"> -->
                                <!-- <div class="section-title">症状描述</div> -->
                                <div class="section-content"><span class="section-label">症状描述：</span>{{ item.symptom || '无' }}</div>
                            <!-- </div> -->
                            <!-- 诊断结果区域 -->
                            <!-- <div class="detail-section"> -->
                                <!-- <div class="section-title">诊断结果</div> -->
                                <div class="section-content"><span class="section-label">诊断结果：</span>{{ item.diagnosis || '无' }}</div>
                            <!-- </div> -->
                            <!-- 治疗方案区域 -->
                            <!-- <div class="detail-section"> -->
                                <!-- <div class="section-title">治疗方案</div> -->
                                <div class="section-content"><span class="section-label">治疗方案：</span>{{ item.treatment || '无' }}</div>
                            <!-- </div> -->
                            <!-- 健康指导区域 -->
                            <!-- <div class="detail-section" v-if="item.health_guide"> -->
                                <!-- <div class="section-title">健康指导</div> -->
                                <div class="section-content"><span class="section-label">健康指导：</span>{{ item.health_guide }}</div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </csDialoga>
    </div>
</template>
<!-- ==================== 健康管理组件脚本 ==================== -->
<script setup>

// ==================== 导入依赖 ====================
import { ref, onMounted, watch, inject, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import { getHealthPe, getHealthPq, gethealthDetail, getHealthMedical, getBmiRange, getHealthNutrition, getHealthDris, getHealthXnxq, getStudentBaseInfo } from '@/api/student'
import csDialoga from '@/components/dialog.vue'

// ==================== 响应式数据定义 ====================
// 体质健康数据
const healthData = ref([])
// 基本健康数据（身高、体重、视力、BMI）
const basicHealthData = ref([])
// 身体警告数据（除了身高、体重、视力之外的其他健康数据）
const healthWarningData = ref([])
// BMI范围数据
const bmiRangeData = ref([])
// 体测报告数据
const physicalTestData = ref([])
// 就医情况数据
const medicalData = ref([])
// 营养摄入量数据
const nutritionData = ref([])
// 营养标准量数据
const nutritionStandardData = ref([])
// 营养建议
const nutritionSuggestion = ref('')
// 健康评级数据

//原来的数据
const healthRating = ref({
  stars: 3, // 默认3颗星
  percentage: 60, // 默认超过60%的同龄人
  level: 'B' // 默认B级
})




// 获取路由参数
const route = useRoute()
// 注入父组件提供的当前学生信息
const currentPersonCode = inject('currentPersonCode')
// personCode - 优先使用父组件提供的，其次使用路由参数，最后使用默认值
const personCode = ref(currentPersonCode?.value || route.query.personCode || '24120001020023')

// ==================== DOM引用定义 ====================
// 体侧报告图表容器引用
const barticbg = ref(null)
// 就医情况图表容器引用
const chatJiuYQK = ref(null)
// 进食量图表容器引用
const chatJinShL = ref(null)
// 营养摄入量图表容器引用
const chatYingYShRL = ref(null)

// ==================== 自动刷新相关数据 ====================
// 自动刷新定时器
const refreshTimer = ref(null)
const refreshInterval = 30000 // 30秒刷新一次

// ==================== 健康详情弹窗相关数据 ====================
// 健康详情弹窗显示状态
const healthDetailVisible = ref(false)
// 健康详情加载状态
const healthDetailLoading = ref(false)
// 健康详情数据
const healthDetailData = ref([])

// ==================== 学年选择相关数据 ====================
// 选中的学年
const selectedAcademicYear = ref('')
// 学年选项列表
const academicYearOptions = ref([])
// 学生基本信息
const studentBaseInfo = ref({})


// ==================== 数据重置方法 ====================
// 重置所有数据，避免显示上一个学生的数据
const resetAllData = () => {
  healthData.value = []
  basicHealthData.value = []
  healthWarningData.value = []
  physicalTestData.value = []
  medicalData.value = []
  nutritionData.value = []
  healthDetailData.value = []
  selectedAcademicYear.value = '' // 重置为"总学年"
  academicYearOptions.value = []
  studentBaseInfo.value = {}
  console.log('已重置所有数据')
}

// ==================== 健康详情相关方法 ====================
// 显示就医详情
const showMedicalDetails = () => {
  console.log('显示就医详情，当前学生:', personCode.value)
  healthDetailVisible.value = true
  fetchHealthDetail()
}

// 获取健康详情数据
const fetchHealthDetail = async () => {
  healthDetailLoading.value = true
  try {
    // 获取当前日期前后249个月的数据（约20年）
    const endDate = new Date()
    const startDate = new Date()
    startDate.setMonth(startDate.getMonth() - 249)

    // 构建查询参数
    const query = {
      personCode: personCode.value,
      startDate: startDate.toISOString().split('T')[0],
      endDate: endDate.toISOString().split('T')[0]
    }

    console.log('获取健康详情参数:', query)
    // 发送请求------------------------------------------
    const response = await gethealthDetail(query)
    console.log('健康详情响应:', response)

    // 处理响应数据
    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      healthDetailData.value = response.data
      console.log('处理后的健康详情数据:', healthDetailData.value)
    } else {
      console.warn('健康详情数据格式异常:', response)
      healthDetailData.value = []
    }
  } catch (error) {
    console.error('获取健康详情失败:', error)
    healthDetailData.value = []
  } finally {
    healthDetailLoading.value = false
  }
}

// 格式化日期显示
const formatDate = (dateString) => {
  if (!dateString) return '未知'
  try {
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch (error) {
    return dateString
  }
}

const getRatingImage = (level) => {
  try {
    // 使用 require.context 动态加载图片
    const images = import.meta.glob('@/assets/images/profile/students/*.png', { eager: true });
    // const imagePath = `@/assets/images/profile/students/${level}.png`;
    
    // 尝试查找匹配的图片
    for (const path in images) {
      if (path.includes(`/${level}.png`)) {
        return images[path].default;
      }
    }
    
    // 如果没有找到对应图片，返回默认图片或空图片
    return ''; // 或者返回一个默认图片
  } catch (error) {
    console.warn(`无法加载评级图片 ${level}.png:`, error);
    return ''; // 返回空字符串，不显示图片
  }
};

// ==================== 学年选择相关方法 ====================
// 获取学生基本信息
const fetchStudentBaseInfo = async () => {
  try {
    const response = await getStudentBaseInfo(personCode.value)
    console.log('学生基本信息响应:', response)
    
    if (response.code === 0 && response.data && response.data.length > 0) {
      const data = response.data[0]
      studentBaseInfo.value = {
        name: data.xm || '',
        studentId: data.xh || '',
        enrollmentYear: data.yubyshj ? data.yubyshj.substring(0, 4) : '',
        grade: data.gradename || '',
        class: data.classname || '',
        rxnd: data.rxnd || '' // 添加入学年度属性
      }
      console.log('处理后的学生基本信息:', studentBaseInfo.value)
      
      // 获取到学生基本信息后，获取学年数据
      await fetchAcademicYearOptions()
    } else {
      console.warn('学生基本信息格式异常:', response)
      studentBaseInfo.value = {}
    }
  } catch (error) {
    console.error('获取学生基本信息失败:', error)
    studentBaseInfo.value = {}
    throw error // 重新抛出错误，让调用者知道失败
  }
}

// 获取学年学期数据
const fetchAcademicYearOptions = async () => {
  try {
    // 使用入学年度(rxnd)作为学籍参数传递给后端接口
    const xj = studentBaseInfo.value.rxnd
    console.log('使用入学年度(rxnd)作为学籍参数获取学年数据:', xj)
    
    // 如果没有rxnd，使用personCode作为备选参数
    const param = xj || personCode.value
    console.log('传递给getHealthXnxq的参数(xj):', param)
    
    const response = await getHealthXnxq(param)
    console.log('学年学期数据响应:', response)
    
    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      academicYearOptions.value = response.data.map(item => ({
        value: item.name, // 使用name作为value
        label: item.name, // 使用name作为label
        startime: item.startime, // 开始时间
        endtime: item.endtime // 结束时间
      }))
      console.log('处理后的学年选项:', academicYearOptions.value)
      
      // 默认选择"总学年"（空值）
      selectedAcademicYear.value = ''
      console.log('设置默认学年为"总学年"')
    } else {
      console.warn('学年学期数据格式异常:', response)
      academicYearOptions.value = []
    }
  } catch (error) {
    console.error('获取学年学期数据失败:', error)
    academicYearOptions.value = []
  }
}

// 学年选择变化处理
const onAcademicYearChange = () => {
  console.log('学年选择变化:', selectedAcademicYear.value)
  
  // 清空之前的数据，避免显示上一个学生的数据
  medicalData.value = []
  healthDetailData.value = []
  
  if (selectedAcademicYear.value) {
    // 找到选中的学年选项
    const selectedOption = academicYearOptions.value.find(option => option.value === selectedAcademicYear.value)
    if (selectedOption) {
      console.log('选中的学年时间范围:', selectedOption.startime, '至', selectedOption.endtime)
      // 根据选中的学年时间范围重新获取就医情况数据
      fetchMedicalData({
        startime: selectedOption.startime,
        endtime: selectedOption.endtime
      })
    }
  } else {
    console.log('未选择学年，显示所有数据')
    // 重新获取所有就医数据
    fetchMedicalData()
  }
}

// ==================== 数据获取方法 ====================
// 获取体质健康数据
const fetchHealthData = async () => {
  try {
    // 发送请求------------------------------------------
    const response = await getHealthPe(personCode.value)
    console.log('体质健康数据响应:', response)

    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      // 过滤掉空值或无效数据，仅展示有实际值的数据项
      healthData.value = response.data.filter(item =>
        item.pe_item_name &&
        item.pe_item_result &&
        item.pe_item_result !== '' &&
        item.pe_item_result !== null &&
        item.pe_item_result !== undefined
      )
      console.log('处理后的体质健康数据:', healthData.value)

      // 获取BMI范围数据后再计算基本健康数据
      await fetchBmiRangeData()
      calculateBasicHealthData()
    } else {
      console.warn('体质健康数据格式异常:', response)
      healthData.value = []
      basicHealthData.value = []
    }
  } catch (error) {
    console.error('获取体质健康数据失败:', error)
    healthData.value = []
    basicHealthData.value = []
  }
}

// 计算基本健康数据（身高、体重、视力、BMI）
const calculateBasicHealthData = () => {
  const basicData = []
  const warningData = []

  // 从健康数据中提取身高、体重、视力信息
  let height = null
  let weight = null
  let leftVision = null
  let rightVision = null

  healthData.value.forEach(item => {
    const itemName = item.pe_item_name
    const itemResult = item.pe_item_result

    if (itemName && itemResult) {
      // 提取身高
      if (itemName.includes('身高') || itemName.includes('height')) {
        height = parseFloat(itemResult)
      }
      // 提取体重
      else if (itemName.includes('体重') || itemName.includes('weight')) {
        weight = parseFloat(itemResult)
      }
      // 提取视力
      else if (itemName.includes('视力') || itemName.includes('vision')) {
        // 处理视力数据，可能包含左右眼信息
        if (itemResult.includes('左') && itemResult.includes('右')) {
          // 格式如："左5.0 右5.1"
          const visionMatch = itemResult.match(/左(\d+\.?\d*)\s*右(\d+\.?\d*)/)
          if (visionMatch) {
            leftVision = parseFloat(visionMatch[1])
            rightVision = parseFloat(visionMatch[2])
          }
        } else {
          // 单个视力值
          const visionValue = parseFloat(itemResult)
          if (!isNaN(visionValue)) {
            leftVision = visionValue
            rightVision = visionValue
          }
        }
      }
      // 其他健康数据项（除了身高、体重、视力）作为身体警告数据
      else {
        // 检查是否包含身高、体重、视力的相关关键词
        const isBasicHealth = itemName.includes('身高') || 
                             itemName.includes('体重') || 
                             itemName.includes('视力') || 
                             itemName.includes('height') || 
                             itemName.includes('weight') || 
                             itemName.includes('vision') ||
                             itemName.includes('BMI')
        
        if (!isBasicHealth) {
          warningData.push({
            pe_item_name: itemName,
            pe_item_result: itemResult,
            unit: item.unit || '',
            pe_item_evaluation: item.pe_item_evaluation || ''
          })
        }
      }
    }
  })

  // 添加身高数据
  if (height && !isNaN(height)) {
    basicData.push({
      name: '身高',
      value: height,
      unit: 'cm',
      evaluation: null
    })
  }

  // 添加体重数据
  if (weight && !isNaN(weight)) {
    // 计算体重评价
    let weightEvaluation = null
    if (height) {
      const bmi = weight / Math.pow(height / 100, 2)
      // 使用BMI范围数据判断评价
      weightEvaluation = getBmiEvaluation(bmi)
    }

    basicData.push({
      name: '体重',
      value: weight,
      unit: 'KG',
      evaluation: weightEvaluation
    })
  }

  // 添加视力数据
  if (leftVision && rightVision && !isNaN(leftVision) && !isNaN(rightVision)) {
    basicData.push({
      name: '视力',
      value: `左${leftVision} 右${rightVision}`,
      unit: '',
      evaluation: null
    })
  }

  // 计算并添加BMI数据
  if (height && weight && !isNaN(height) && !isNaN(weight)) {
    const bmi = weight / Math.pow(height / 100, 2)
    if (!isNaN(bmi)) {
      basicData.push({
        name: 'BMI',
        value: bmi.toFixed(1),
        unit: '',
        evaluation: null
      })
    }
  }

  basicHealthData.value = basicData
  healthWarningData.value = warningData
  console.log('计算后的基本健康数据:', basicHealthData.value)
  console.log('计算后的身体警告数据:', healthWarningData.value)
}

// 根据BMI值获取评价
const getBmiEvaluation = (bmi) => {
  if (!bmiRangeData.value || bmiRangeData.value.length === 0) {
    // 如果没有BMI范围数据，使用默认判断
    if (bmi < 18.5) {
      return '体重过低'
    } else if (bmi >= 18.5 && bmi < 24) {
      return '正常'
    } else if (bmi >= 24 && bmi < 28) {
      return '偏重'
    } else {
      return '肥胖'
    }
  }

  // 使用BMI范围数据判断
  for (const range of bmiRangeData.value) {
    if (bmi >= range.lower_value && bmi <= range.upper_value) {
      return range.evaluate
    }
  }

  // 如果没有匹配的范围，返回默认值
  return '正常'
}

// 获取评价标签样式
const getEvaluationStyle = (evaluation) => {
  switch (evaluation) {
    case '体重过低':
      return {
        border: '1px solid #FFA500',
        backgroundColor: '#FFA500'
      }
    case '正常':
      return {
        border: '1px solid #00A7FF',
        backgroundColor: '#00A7FF'
      }
    case '肥胖前期':
      return {
        border: '1px solid #FF8C00',
        backgroundColor: '#FF8C00'
      }
    case 'I度肥胖':
      return {
        border: '1px solid #FF6B6B',
        backgroundColor: '#FF6B6B'
      }
    case 'II度肥胖':
      return {
        border: '1px solid #FF4500',
        backgroundColor: '#FF4500'
      }
    case 'Ⅲ度肥胖':
      return {
        border: '1px solid #FF0000',
        backgroundColor: '#FF0000'
      }
    case '偏轻':
      return {
        border: '1px solid #FFA500',
        backgroundColor: '#FFA500'
      }
    case '偏重':
      return {
        border: '1px solid #BD3124',
        backgroundColor: '#BD3124'
      }
    case '肥胖':
      return {
        border: '1px solid #FF0000',
        backgroundColor: '#FF0000'
      }
    default:
      return {
        border: '1px solid #00A7FF',
        backgroundColor: '#00A7FF'
      }
  }
}

// 获取数值样式
const getValueStyle = (itemName) => {
  switch (itemName) {
    case '身高':
      return {
        color: '#00FFB2' // 青色
      }
    case '体重':
      return {
        color: '#00FFB2' // 红色
      }
    case '视力':
      return {
        color: '#00FFB2' // 青色
      }
    case 'BMI':
      return {
        color: '#00FFB2' // 青色
      }
    default:
      return {
        color: 'white'
      }
  }
}

// 获取体测报告数据----------------------------------------------------------------
const fetchPhysicalTestData = async () => {
  try {
    const response = await getHealthPq(personCode.value)
    console.log('体测报告数据响应:', response)

    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      // 过滤掉空值或无效数据，仅展示有实际值的数据项
      physicalTestData.value = response.data.filter(item =>
        item.pq_item_name &&
        item.pq_item_result &&
        item.pq_item_result !== '' &&
        item.pq_item_result !== null &&
        item.pq_item_result !== undefined
      )
      console.log('处理后的体测报告数据:', physicalTestData.value)

      // 计算健康评级
      calculateHealthRating()

      // 更新体测报告图表
      updatePhysicalTestChart()
    } else {
      console.warn('体测报告数据格式异常:', response)
      physicalTestData.value = []
    }
  } catch (error) {
    console.error('获取体测报告数据失败:', error)
    physicalTestData.value = []
  }
}

// 计算健康评级
const calculateHealthRating = () => {
  if (!physicalTestData.value || physicalTestData.value.length === 0) {
    // 如果没有数据，使用默认值
    healthRating.value = {
      stars: 1,
      percentage: 20,
      level: 'D'
    }
    return
  }

  // 查找总分数据项
  const totalScoreItem = physicalTestData.value.find(item =>
    item.pq_item_name && (
      item.pq_item_name.includes('总分') ||
      item.pq_item_name.includes('total') ||
      item.pq_item_name.includes('Total')
    )
  )

  if (!totalScoreItem || !totalScoreItem.pq_item_level) {
    console.warn('未找到总分数据或pq_item_level属性')
    healthRating.value = {
      stars: 1,
      percentage: 20,
      level: 'D'
    }
    return
  }

  const level = totalScoreItem.pq_item_level
  console.log('找到总分等级:', level)

  // 根据pq_item_level判断星级和百分比
  let stars = 1
  let percentage = 20
  let levelLetter = 'D'

  switch (level) {
    case '不及格':
    case 'fail':
    case 'FAIL':
      stars = 1
      percentage = 20
      levelLetter = 'D'
      break
    case '及格':
    case 'pass':
    case 'PASS':
      stars = 2
      percentage = 40
      levelLetter = 'C'
      break
    case '良好':
    case 'good':
    case 'GOOD':
      stars = 3
      percentage = 60
      levelLetter = 'B'
      break
    case '优秀':
    case 'excellent':
    case 'EXCELLENT':
      // 检查是否超过95分
      const score = parseFloat(totalScoreItem.pq_item_score || 0)
      if (score >= 95) {
        stars = 5
        percentage = 90
        levelLetter = 'A+'
      } else {
        stars = 4
        percentage = 80
        levelLetter = 'A'
      }
      break
    default:
      // 如果等级不明确，尝试根据分数判断
      const defaultScore = parseFloat(totalScoreItem.pq_item_score || 0)
      if (defaultScore < 60) {
        stars = 1
        percentage = 20
        levelLetter = 'D'
      } else if (defaultScore < 70) {
        stars = 2
        percentage = 40
        levelLetter = 'C'
      } else if (defaultScore < 80) {
        stars = 3
        percentage = 60
        levelLetter = 'B'
      } else if (defaultScore < 95) {
        stars = 4
        percentage = 80
        levelLetter = 'A'
      } else {
        stars = 5
        percentage = 90
        levelLetter = 'A+'
      }
      break
  }
// 更新健康等级
  healthRating.value = {
    stars,
    percentage,
    level: levelLetter
  }

  console.log('计算后的健康评级:', healthRating.value)
}

// 获取BMI范围数据
const fetchBmiRangeData = async () => {
  try {
    const response = await getBmiRange({ personCode: personCode.value })
    console.log('BMI范围数据响应:', response)

    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      bmiRangeData.value = response.data
      console.log('处理后的BMI范围数据:', bmiRangeData.value)
    } else {
      console.warn('BMI范围数据格式异常:', response)
      bmiRangeData.value = []
    }
  } catch (error) {
    console.error('获取BMI范围数据失败:', error)
    bmiRangeData.value = []
  }
}

// 获取就医情况数据----------------------------------------------------
const fetchMedicalData = async (timeRange = null) => {
  try {
    let startDate, endDate

    if (timeRange && timeRange.startime && timeRange.endtime) {
      // 使用选中的学年时间范围
      startDate = new Date(timeRange.startime)
      endDate = new Date(timeRange.endtime)
    } else {
      // 获取当前日期前后249个月的数据（约20年）
      endDate = new Date()
      startDate = new Date()
      startDate.setMonth(startDate.getMonth() - 249)
    }

    // 构建查询参数
    const query = {
      personCode: personCode.value,
      startDate: startDate.toISOString().split('T')[0],
      endDate: endDate.toISOString().split('T')[0]
    }

    console.log('获取就医情况参数:', query)
    const response = await getHealthMedical(query)
    console.log('就医情况响应:', response)

    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      // 将API返回的数据格式转换为饼图所需的格式
      medicalData.value = response.data.map(item => ({
        name: item.diagnosis,
        value: item.num
      }))
      console.log('处理后的就医情况数据:', medicalData.value)

      // 更新就医情况图表
      updateMedicalChart()
    } else {
      console.warn('就医情况数据格式异常:', response)
      medicalData.value = []
    }
  } catch (error) {
    console.error('获取就医情况数据失败:', error)
    medicalData.value = []
  }
}

// 获取营养摄入量数据----------------------------------------------------
const fetchNutritionData = async () => {
  try {
    console.log('获取营养摄入量数据，personCode:', personCode.value)
    const response = await getHealthNutrition({ personCode: personCode.value })
    console.log('营养摄入量数据响应:', response)

    if (response.code === 0 && response.data) {
      // 保存营养摄入量数据
      nutritionData.value = response.data.list || []
      // 保存营养建议
      nutritionSuggestion.value = response.data.sug || ''
      console.log('处理后的营养摄入量数据:', nutritionData.value)
      console.log('营养建议:', nutritionSuggestion.value)

      // 获取营养标准量数据
      await fetchNutritionStandardData()
    } else {
      console.warn('营养摄入量数据格式异常:', response)
      nutritionData.value = []
      nutritionSuggestion.value = ''
      // 即使没有摄入量数据，也尝试获取标准量数据
      await fetchNutritionStandardData()
    }
  } catch (error) {
    console.error('获取营养摄入量数据失败:', error)
    nutritionData.value = []
    nutritionSuggestion.value = ''
    // 即使出错，也尝试获取标准量数据
    await fetchNutritionStandardData()
  }
}

// 获取营养标准量数据----------------------------------------------------
const fetchNutritionStandardData = async () => {
  try {
    // 从健康数据中获取性别和年龄信息
    let sex = '男' // 默认值
    let age = 18 // 默认值

    // 从健康数据中查找性别和年龄信息
    healthData.value.forEach(item => {
      if (item.pe_item_name && item.pe_item_name.includes('性别')) {
        sex = item.pe_item_result || '男'
      }
      if (item.pe_item_name && item.pe_item_name.includes('年龄')) {
        const ageValue = parseInt(item.pe_item_result)
        if (!isNaN(ageValue)) {
          age = ageValue
        }
      }
    })

    console.log('获取营养标准量数据，sex:', sex, 'age:', age)
    const response = await getHealthDris({ sex, age })
    console.log('营养标准量数据响应:', response)

    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      nutritionStandardData.value = response.data
      console.log('处理后的营养标准量数据:', nutritionStandardData.value)

      // 更新营养摄入量图表
      updateNutritionChart()
    } else {
      console.warn('营养标准量数据格式异常:', response)
      nutritionStandardData.value = []
      // 即使没有标准量数据，也尝试更新图表
      updateNutritionChart()
    }
  } catch (error) {
    console.error('获取营养标准量数据失败:', error)
    nutritionStandardData.value = []
    // 即使出错，也尝试更新图表
    updateNutritionChart()
  }
}

// ==================== 自动刷新相关方法 ====================
// 启动自动刷新数据
const startAutoRefresh = () => {
  // 清除现有定时器
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
  }

  // 启动新的定时器
  refreshTimer.value = setInterval(() => {
    console.log('自动刷新健康数据...')
    fetchHealthData()
    fetchPhysicalTestData()
    fetchMedicalData()
    fetchNutritionData()
  }, refreshInterval)
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
    refreshTimer.value = null
    console.log('停止自动刷新')
  }
}

// ==================== 图表更新方法 ====================
// 更新体测报告图表
const updatePhysicalTestChart = () => {
  if (!barticbg.value || physicalTestData.value.length === 0) return

  // 确保DOM元素存在且有数据时才创建图表
  const chartContainer = barticbg.value
  if (!chartContainer) return

  const chart = echarts.init(chartContainer)

  // ==================== 体测数据过滤板块 ====================
  // 核心功能：过滤掉总分项目，确保图表只显示具体体测项目成绩
  // 过滤逻辑：检查项目名称是否包含总分相关关键词
  const filteredData = physicalTestData.value.filter(item => 
    item.pq_item_name && // 确保项目名称存在
    !item.pq_item_name.includes('总分') && // 排除中文"总分"
    !item.pq_item_name.includes('total') && // 排除英文小写"total"
    !item.pq_item_name.includes('Total') // 排除英文大写"Total"
  )
  
  // ==================== 图表数据提取板块 ====================
  // 核心功能：从过滤后的数据中提取图表所需的项目名称和分数
  const itemNames = filteredData.map(item => item.pq_item_name) // 提取项目名称用于Y轴标签
  const scores = filteredData.map(item => item.pq_item_score || 0) // 提取分数用于柱状图数据，默认值为0

  // 配置体测报告图表选项
  const colorList = ["#00B2FF", "#00FF94", "#01F5FC", "#FAFF00"]
  chart.setOption({
    color: colorList,
    // 提示框配置
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      // 自定义提示框内容
      formatter: function(params) {
        // 获取当前数据项
        const data = params[0]
        // 返回提示框内容
        return `${data.name}<br/>${data.value}`
      }
    },
    // 图表网格配置
    grid: {
      top: 0,
      right: 60,
      bottom: 0,
      left: 0,
      containLabel: true,
    },
    // X轴配置
    xAxis: [
      {
        type: 'value',
        show: false,
        max: 100, // 设置最大值为100分
      },
    ],
    // Y轴配置
    // ['50米跑', '立定跳远', '立定跳远', '立定跳远', '立定跳远', '立定跳远']
    yAxis: [
      {
        type: 'category',
        data: itemNames,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12
        },
        splitLine: {
          show: false,
        },
      },
    ],
    // 数据系列配置
    series: [
      {
        name: '体测成绩',
        type: 'bar',
        barWidth: 15,
        data: scores,
        // 数据标签配置
        label: {
          show: true,
          position: 'right',
          color: function (params) {
            return params.color;
          },
          fontSize: 12,
          distance: 10,
          formatter: '{c}分',
        },
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex % colorList.length];
            },
          },
        },
      },
    ],
  })
}

// 更新就医情况图表
const updateMedicalChart = () => {
  if (!chatJiuYQK.value) return

  const chart = echarts.init(chatJiuYQK.value)

  // 配置就医情况饼图
  chart.setOption({
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    series: [{
      type: 'pie',
      radius: [50, 65],
      center: ['50%', '50%'],
      // 标签配置
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 次}',
        minMargin: 5,
        edgeDistance: 10,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      label: {
        formatter: "{a|{b}}",
        position: "outside",
        alignTo: "labelLine",
        padding: [0, 0, 15, 0],
        rich: {
          a: {
            color: "inherit",
            fontSize: 12,
          },
        },
      },
      // 为每个扇区添加不同的渐变色
      data: medicalData.value.map((item, index) => {
        return {
          name: item.name,
          value: item.value
        };
      })
    }]
  })
}

// 更新营养摄入量图表
const updateNutritionChart = () => {
  if (!chatYingYShRL.value) return

  const chart = echarts.init(chatYingYShRL.value)

  // 合并营养摄入量数据和标准量数据
  const chartData = []
  
  // 遍历营养摄入量数据
  nutritionData.value.forEach(nutrition => {
    // 查找对应的标准量数据
    const standard = nutritionStandardData.value.find(item => 
      item.nutrition_name === nutrition.nutrition_name
    )
    
    if (standard) {
      chartData.push({
        product: nutrition.nutrition_name,
        intake: nutrition.nutrition_num,
        standard: standard.standard_value
      })
    } else {
      // 如果没有找到对应的标准量，只显示摄入量
      chartData.push({
        product: nutrition.nutrition_name,
        intake: nutrition.nutrition_num,
        standard: 0
      })
    }
  })

  // 如果没有数据，使用默认数据
  if (chartData.length === 0) {
    chartData.push(
      { product: '能量', intake: 0, standard: 0 },
      { product: '蛋白质', intake: 0, standard: 0 },
      { product: '脂肪', intake: 0, standard: 0 },
      { product: '钙', intake: 0, standard: 0 },
      { product: '铁', intake: 0, standard: 0 },
      { product: '锌', intake: 0, standard: 0 }
    )
  }

  // 配置营养摄入量图表
  chart.setOption({
    color: ["#00FFF0", "#fff509", "#00c1ff", "#00fff1"],
    grid: {
      top: '18%',
      right: '2%',
      bottom: 0,
      left: 0,
      containLabel: true
    },
    legend: {
      data: ['摄入量', '标准量'],
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      top: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        let result = params[0].name + '<br/>'
        params.forEach(param => {
          const color = param.color
          const value = param.value
          const seriesName = param.seriesName
          result += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${color};"></span>${seriesName}: ${value}<br/>`
        })
        return result
      }
    },
    xAxis: {
      type: 'category',
      data: chartData.map(item => item.product),
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        rotate: 45
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.3)'
        }
      }
    },
    series: [
      {
        name: '摄入量',
        type: 'bar',
        data: chartData.map(item => item.intake),
        barWidth: '20%',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 10,
          formatter: '{c}'
        }
      },
      {
        name: '标准量',
        type: 'bar',
        data: chartData.map(item => item.standard),
        barWidth: '20%',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 10,
          formatter: '{c}'
        }
      }
    ]
  })
}

// ==================== 监听器配置 ====================
// 监听路由参数变化，重新获取数据
watch(() => route.query.personCode, (newPersonCode) => {
  // 如果personCode有变化，则重新获取数据
  if (newPersonCode && newPersonCode !== personCode.value) {
    // 更新personCode的值
    personCode.value = newPersonCode
    console.log('health组件接收到新的personCode:', newPersonCode)
    
    // 重置所有数据，避免显示上一个学生的数据
    resetAllData()
    
    // 重新获取数据
    fetchHealthData()
    // 重新获取体测数据
    fetchPhysicalTestData()
    // 重新获取就医数据
    fetchMedicalData()
    // 重新获取营养数据
    fetchNutritionData()
    // 重新获取学生基本信息和学年数据
    fetchStudentBaseInfo()
  }
}, { immediate: true })

// 监听personCode变化，重新获取数据
watch(personCode, (newPersonCode) => {
  if (newPersonCode) {
    console.log('health组件personCode变化:', newPersonCode)
    
    // 重置所有数据，避免显示上一个学生的数据
    resetAllData()
    
    fetchHealthData()
    fetchPhysicalTestData()
    fetchMedicalData()
    fetchNutritionData()
    fetchStudentBaseInfo()
    // 重新启动自动刷新
    startAutoRefresh()
  }
})

// 监听父组件提供的personCode变化
if (currentPersonCode) {
      watch(currentPersonCode, (newPersonCode) => {
      if (newPersonCode && newPersonCode !== personCode.value) {
        personCode.value = newPersonCode
        console.log('health组件接收到父组件的personCode变化:', newPersonCode)
        
        // 重置所有数据，避免显示上一个学生的数据
        resetAllData()
        
        fetchHealthData()
        fetchPhysicalTestData()
        fetchMedicalData()
        fetchNutritionData()
        fetchStudentBaseInfo()
        // 重新启动自动刷新
        startAutoRefresh()
    }
  })
}

// ==================== 生命周期钩子 ====================
onMounted(() => {
  // 确保在组件挂载时获取数据
  console.log('health组件挂载，当前personCode:', personCode.value)
  
  // 按照设计思路执行：
  // 1. 组件挂载 → 获取学生基本信息
  // 2. 获取基本信息成功 → 自动获取学年数据
  // 3. 获取学年数据成功 → 根据入学年份设置默认学年
  // 4. 用户选择学年 → 根据选中学年的时间范围重新获取就医数据
  
  // 先获取学生基本信息
  fetchStudentBaseInfo().then(() => {
    // 获取基本信息成功后，获取其他数据
    fetchHealthData()
    fetchPhysicalTestData()
    fetchNutritionData()
    
    // 如果已经设置了默认学年，则根据学年时间范围获取就医数据
    if (selectedAcademicYear.value) {
      const selectedOption = academicYearOptions.value.find(option => option.value === selectedAcademicYear.value)
      if (selectedOption) {
        fetchMedicalData({
          startime: selectedOption.startime,
          endtime: selectedOption.endtime
        })
      } else {
        fetchMedicalData()
      }
    } else {
      fetchMedicalData()
    }
  }).catch(() => {
    // 如果获取基本信息失败，仍然获取其他数据
    fetchHealthData()
    fetchPhysicalTestData()
    fetchMedicalData()
    fetchNutritionData()
  })

  // 启动自动刷新
  startAutoRefresh()

  // ==================== 窗口大小变化监听 ====================
  window.addEventListener('resize', function () {
    // 重新调整所有图表大小
    // 体测报告图表resize
    const physicalTestChart = echarts.getInstanceByDom(barticbg.value);
    if (physicalTestChart) {
      physicalTestChart.resize();
    }
    // 就医情况图表resize
    const medicalChart = echarts.getInstanceByDom(chatJiuYQK.value);
    if (medicalChart) {
      medicalChart.resize();
    }
    // 营养摄入量图表resize
    const nutritionChart = echarts.getInstanceByDom(chatYingYShRL.value);
    if (nutritionChart) {
      nutritionChart.resize();
    }
  })
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoRefresh()
})
</script>
<!-- ==================== 健康管理组件样式 ==================== -->
<style scoped="study-life-Container" lang="scss">
/* ==================== 图表容器样式 ==================== */
.chart-container {
    width: 100%;
    height: 100%;
}

/* ==================== 主容器样式 ==================== */
.studyContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* 标题样式 */
    .title {
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: left;
        color: white;
        vertical-align: middle;
        border-left: 5px solid #00A7FF;
        padding-left: 10px;
        border-radius: 2px;
        margin-bottom: 5px;
    }

    /* ==================== 体检报告区域样式 ==================== */
    .box1 {
        margin: 0px auto;
        box-sizing: border-box;
        width: 99%;
        max-height: 34%;
        flex-shrink: 1;

        /* 体检报告内容容器 */
        .chengJJL-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 2px;

            /* 体检报告项目容器 */
            .chengJJL-item {
                display: flex;
                flex-direction: column;
                gap: 2px;

                /* 健康评级区域样式 */
                .chengJJL-itembox-jkpj {
                    border: 1px solid ;
                    color: #00FFE0;
                    border-radius: 5px;
                }

                /* 基本信息区域样式 */
                .chengJJL-itembox-jkpj-baseInfo {
                    border-radius: 10px;
                    margin-top: 5px;
                }

                /* 基本信息内容容器样式 */
                .chengJJL-itembox-jkpj-baseInfo-wk {
                    width: 100%;
                    display: flex;
                    margin-top: 5px;
                    flex-wrap: wrap;
                    gap: 10px;
                    background-color: rgba(44,135,174,0.7);
                    padding: 0 23px;
                    height: 25px;
                    line-height: 25px;
                    box-sizing: border-box;

                    div {
                        flex: 1;
                        min-width: 120px;
                    }
                }
            }

        }
    }

    /* ==================== 体测报告和营养分析区域样式 ==================== */
    .box2 {
        margin: 0px auto;
        box-sizing: border-box;
        height: 36%;
        width: 99%;
        flex-grow: 1;
        flex-shrink: 1;
        flex: 1;

        /* 图表容器样式 */
        .xuekjhd-container {
            display: flex;
            gap: 2px;

            /* 图表项目容器样式 */
            .xuekjhd-itembox {
                width: 100%;
                flex: 1;
            }
        }
    }

    /* ==================== 健康评级样式 ==================== */
    .rating-container {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 45px;
        color: #00b894;
        /* 整体色调，可按需改 */

    }

    .rating-image {
      display: flex;
      align-items: center;
    }

    .rating-img {
      width: 60px;
      height: 60px;
      object-fit: contain;
    }


    /* 心形图标样式 */
    .heart {
        width: 30px;
        height: 30px;
        background-size: contain;
        cursor: pointer;
        transition: transform 0.2s ease;
        margin-top: 15px;
        position: relative;
    }

    /* 实心心形图标样式 */
    .heart.full {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300FFB2"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
    }

    /* 空心心形图标样式 */
    .heart.empty {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300FFB2" stroke-width="2"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
    }

    /* 心形图标悬停效果 */
    .heart:hover {
        transform: scale(1.1);
    }

    /* ==================== 就医情况标题和学年选择器样式 ==================== */
    .medical-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .academic-year-selector {
        display: flex;
        align-items: center;
        margin-right: 20px;
    }

    .academic-year-select {
        background: rgba(0, 167, 255, 0.1);
        border: 1px solid #00A7FF;
        border-radius: 5px;
        color: white;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
        outline: none;
        transition: all 0.3s ease;
    }

    .academic-year-select:hover {
        background: rgba(0, 167, 255, 0.2);
        border-color: #00f0ff;
    }

    .academic-year-select:focus {
        border-color: #00f0ff;
        box-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
    }

    .academic-year-select option {
        background: #1a1a1a;
        color: white;
        border: none;
    }

    /* ==================== 就医情况图表容器样式 ==================== */
.medical-chart-container {
    position: relative;
    width: 100%;
    height: calc(100% - 28px);
}



     /* 就医情况图表样式 */
     .medical-chart-container .chart-container {
         width: 100%;
         height: calc(100% - 20px);
     }

     /* 详情按钮容器样式 */
     .detail-button-container {
         position: absolute;
         bottom: 10px;
         right: 10px;
         display: flex;
         justify-content: flex-end;
     }

    /* 详情按钮样式 */
    .detail-button {
        color: #00A7FF;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        background: transparent;
        transition: color 0.3s ease;
    }

    /* 详情按钮悬停效果 */
    .detail-button:hover {
        color: #0077b6;
    }
}

/* ==================== 健康详情弹窗样式 ==================== */
/* 健康详情内容容器 */
.health-detail-content {
    color: #fff;
    font-family: "PingFang SC", "PingFang SC", sans-serif;
}

/* 就医大标题样式 */
.medical-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: white;
    margin-bottom: 25px;
    padding: 15px 0;
    border-bottom: 2px  rgba(0, 240, 255, 0.5);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* 加载状态容器 */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

/* 加载状态文本 */
.loading-text {
    color: #00f0ff;
    font-size: 16px;
}

/* 无数据状态容器 */
.no-data-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

/* 无数据状态文本 */
.no-data-text {
    color: #999;
    font-size: 16px;
}

/* 健康详情列表容器 */
.health-detail-list {
    max-height: 600px;
    overflow-y: auto;
}

/* 健康详情项目样式 */
.health-detail-item {
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: none;
}

/* 详情头部样式 */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
}

/* 就诊时间和医生姓名样式 */
.treatment-date, .doctor-name {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 标签文本样式 */
.date-label, .doctor-label {
    color: #00f0ff;
    font-weight: bold;
    font-size: 14px;
}

/* 值文本样式 */
.date-value, .doctor-value {
    color: #fff;
    font-size: 14px;
}

/* 详情内容容器 */
.detail-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 详情区域样式 */
.detail-section {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
}

/* 区域标题样式 */
.section-title {
    color: #00f0ff;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
    padding-bottom: 5px;
}

/* 区域内容样式 */
.section-content {
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
}

/* 标签文本样式 */
.section-label {
    color: #00f0ff;
    font-weight: bold;
    // text-shadow: 0 0 5px #00f0ff;
}
</style>